<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
    <style>
        #main{
            width:100px;
            height: 80px;
            background: #eeee;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="main" style="width:100px;height: 80px;"></div>
    <script>

        var res = { "code": 0, "message": "success", "time": 1685423304879, "version": "1.0.0", "body": [{ "nav": 1.0238, "rate": -0.0156, "insertTime": "2023-05-30 09:30:11", "lastNav": "1.04" }, { "nav": 1.0223, "rate": -0.017, "insertTime": "2023-05-30 09:31:06", "lastNav": "1.04" }, { "nav": 1.0186, "rate": -0.0206, "insertTime": "2023-05-30 09:34:23", "lastNav": "1.04" }, { "nav": 1.0186, "rate": -0.0206, "insertTime": "2023-05-30 09:34:23", "lastNav": "1.04" }, { "nav": 1.0222, "rate": -0.0171, "insertTime": "2023-05-30 09:38:31", "lastNav": "1.04" }, { "nav": 1.0222, "rate": -0.0171, "insertTime": "2023-05-30 09:38:31", "lastNav": "1.04" }, { "nav": 1.0222, "rate": -0.0171, "insertTime": "2023-05-30 09:38:41", "lastNav": "1.04" }, { "nav": 1.0238, "rate": -0.0156, "insertTime": "2023-05-30 09:38:51", "lastNav": "1.04" }, { "nav": 1.0238, "rate": -0.0156, "insertTime": "2023-05-30 09:39:00", "lastNav": "1.04" }, { "nav": 1.0238, "rate": -0.0156, "insertTime": "2023-05-30 09:39:09", "lastNav": "1.04" }, { "nav": 1.0259, "rate": -0.0136, "insertTime": "2023-05-30 09:40:05", "lastNav": "1.04" }, { "nav": 1.0249, "rate": -0.0145, "insertTime": "2023-05-30 09:41:06", "lastNav": "1.04" }, { "nav": 1.0263, "rate": -0.0132, "insertTime": "2023-05-30 09:42:06", "lastNav": "1.04" }, { "nav": 1.0268, "rate": -0.0127, "insertTime": "2023-05-30 09:43:06", "lastNav": "1.04" }, { "nav": 1.0254, "rate": -0.014, "insertTime": "2023-05-30 09:44:06", "lastNav": "1.04" }, { "nav": 1.0253, "rate": -0.0141, "insertTime": "2023-05-30 09:46:09", "lastNav": "1.04" }, { "nav": 1.0253, "rate": -0.0141, "insertTime": "2023-05-30 09:46:18", "lastNav": "1.04" }, { "nav": 1.0249, "rate": -0.0145, "insertTime": "2023-05-30 09:47:06", "lastNav": "1.04" }, { "nav": 1.0252, "rate": -0.0142, "insertTime": "2023-05-30 09:48:06", "lastNav": "1.04" }, { "nav": 1.0252, "rate": -0.0142, "insertTime": "2023-05-30 09:49:06", "lastNav": "1.04" }, { "nav": 1.0267, "rate": -0.0128, "insertTime": "2023-05-30 09:50:06", "lastNav": "1.04" }, { "nav": 1.0297, "rate": -0.0099, "insertTime": "2023-05-30 09:51:06", "lastNav": "1.04" }, { "nav": 1.0287, "rate": -0.0109, "insertTime": "2023-05-30 09:52:06", "lastNav": "1.04" }, { "nav": 1.0273, "rate": -0.0122, "insertTime": "2023-05-30 09:53:06", "lastNav": "1.04" }, { "nav": 1.0267, "rate": -0.0128, "insertTime": "2023-05-30 09:54:06", "lastNav": "1.04" }, { "nav": 1.027, "rate": -0.0125, "insertTime": "2023-05-30 09:55:06", "lastNav": "1.04" }, { "nav": 1.0261, "rate": -0.0134, "insertTime": "2023-05-30 09:56:06", "lastNav": "1.04" }, { "nav": 1.026, "rate": -0.0135, "insertTime": "2023-05-30 09:57:06", "lastNav": "1.04" }, { "nav": 1.0257, "rate": -0.0138, "insertTime": "2023-05-30 09:58:06", "lastNav": "1.04" }, { "nav": 1.0251, "rate": -0.0143, "insertTime": "2023-05-30 09:59:06", "lastNav": "1.04" }, { "nav": 1.0255, "rate": -0.0139, "insertTime": "2023-05-30 10:01:10", "lastNav": "1.04" }, { "nav": 1.0246, "rate": -0.0148, "insertTime": "2023-05-30 10:02:07", "lastNav": "1.04" }, { "nav": 1.0248, "rate": -0.0146, "insertTime": "2023-05-30 10:03:06", "lastNav": "1.04" }, { "nav": 1.0249, "rate": -0.0145, "insertTime": "2023-05-30 10:05:53", "lastNav": "1.04" }, { "nav": 1.0249, "rate": -0.0145, "insertTime": "2023-05-30 10:05:53", "lastNav": "1.04" }, { "nav": 1.0249, "rate": -0.0145, "insertTime": "2023-05-30 10:06:06", "lastNav": "1.04" }, { "nav": 1.0243, "rate": -0.0151, "insertTime": "2023-05-30 10:07:07", "lastNav": "1.04" }, { "nav": 1.026, "rate": -0.0135, "insertTime": "2023-05-30 10:08:06", "lastNav": "1.04" }, { "nav": 1.0261, "rate": -0.0134, "insertTime": "2023-05-30 10:09:06", "lastNav": "1.04" }, { "nav": 1.0269, "rate": -0.0126, "insertTime": "2023-05-30 10:10:06", "lastNav": "1.04" }, { "nav": 1.0282, "rate": -0.0113, "insertTime": "2023-05-30 10:11:06", "lastNav": "1.04" }, { "nav": 1.03, "rate": -0.0096, "insertTime": "2023-05-30 10:12:06", "lastNav": "1.04" }, { "nav": 1.0319, "rate": -0.0078, "insertTime": "2023-05-30 10:13:06", "lastNav": "1.04" }, { "nav": 1.0318, "rate": -0.0079, "insertTime": "2023-05-30 10:14:06", "lastNav": "1.04" }, { "nav": 1.0322, "rate": -0.0075, "insertTime": "2023-05-30 10:15:06", "lastNav": "1.04" }, { "nav": 1.0312, "rate": -0.0085, "insertTime": "2023-05-30 10:16:06", "lastNav": "1.04" }, { "nav": 1.0301, "rate": -0.0095, "insertTime": "2023-05-30 10:17:06", "lastNav": "1.04" }, { "nav": 1.0301, "rate": -0.0095, "insertTime": "2023-05-30 10:18:06", "lastNav": "1.04" }, { "nav": 1.0295, "rate": -0.0101, "insertTime": "2023-05-30 10:19:06", "lastNav": "1.04" }, { "nav": 1.0293, "rate": -0.0103, "insertTime": "2023-05-30 10:20:06", "lastNav": "1.04" }, { "nav": 1.0285, "rate": -0.0111, "insertTime": "2023-05-30 10:21:06", "lastNav": "1.04" }, { "nav": 1.0287, "rate": -0.0109, "insertTime": "2023-05-30 10:22:06", "lastNav": "1.04" }, { "nav": 1.0298, "rate": -0.0098, "insertTime": "2023-05-30 10:23:06", "lastNav": "1.04" }, { "nav": 1.0289, "rate": -0.0107, "insertTime": "2023-05-30 10:24:06", "lastNav": "1.04" }, { "nav": 1.0294, "rate": -0.0102, "insertTime": "2023-05-30 10:25:06", "lastNav": "1.04" }, { "nav": 1.0298, "rate": -0.0098, "insertTime": "2023-05-30 10:26:06", "lastNav": "1.04" }, { "nav": 1.0279, "rate": -0.0116, "insertTime": "2023-05-30 10:27:06", "lastNav": "1.04" }, { "nav": 1.0272, "rate": -0.0123, "insertTime": "2023-05-30 10:28:06", "lastNav": "1.04" }, { "nav": 1.0284, "rate": -0.0112, "insertTime": "2023-05-30 10:29:06", "lastNav": "1.04" }, { "nav": 1.0287, "rate": -0.0109, "insertTime": "2023-05-30 10:30:06", "lastNav": "1.04" }, { "nav": 1.0285, "rate": -0.0111, "insertTime": "2023-05-30 10:31:06", "lastNav": "1.04" }, { "nav": 1.0302, "rate": -0.0094, "insertTime": "2023-05-30 10:32:06", "lastNav": "1.04" }, { "nav": 1.0308, "rate": -0.0088, "insertTime": "2023-05-30 10:33:06", "lastNav": "1.04" }, { "nav": 1.0323, "rate": -0.0074, "insertTime": "2023-05-30 10:34:06", "lastNav": "1.04" }, { "nav": 1.0306, "rate": -0.009, "insertTime": "2023-05-30 10:35:06", "lastNav": "1.04" }, { "nav": 1.0296, "rate": -0.01, "insertTime": "2023-05-30 10:36:06", "lastNav": "1.04" }, { "nav": 1.0301, "rate": -0.0095, "insertTime": "2023-05-30 10:37:06", "lastNav": "1.04" }, { "nav": 1.0303, "rate": -0.0093, "insertTime": "2023-05-30 10:38:06", "lastNav": "1.04" }, { "nav": 1.0299, "rate": -0.0097, "insertTime": "2023-05-30 10:39:06", "lastNav": "1.04" }, { "nav": 1.0305, "rate": -0.0091, "insertTime": "2023-05-30 10:40:06", "lastNav": "1.04" }, { "nav": 1.0307, "rate": -0.0089, "insertTime": "2023-05-30 10:41:06", "lastNav": "1.04" }, { "nav": 1.0312, "rate": -0.0085, "insertTime": "2023-05-30 10:42:06", "lastNav": "1.04" }, { "nav": 1.0319, "rate": -0.0078, "insertTime": "2023-05-30 10:43:06", "lastNav": "1.04" }, { "nav": 1.0316, "rate": -0.0081, "insertTime": "2023-05-30 10:44:06", "lastNav": "1.04" }, { "nav": 1.0321, "rate": -0.0076, "insertTime": "2023-05-30 10:45:06", "lastNav": "1.04" }, { "nav": 1.0313, "rate": -0.0084, "insertTime": "2023-05-30 10:46:06", "lastNav": "1.04" }, { "nav": 1.0313, "rate": -0.0084, "insertTime": "2023-05-30 10:47:06", "lastNav": "1.04" }, { "nav": 1.0298, "rate": -0.0098, "insertTime": "2023-05-30 10:48:06", "lastNav": "1.04" }, { "nav": 1.0288, "rate": -0.0108, "insertTime": "2023-05-30 10:49:06", "lastNav": "1.04" }, { "nav": 1.0284, "rate": -0.0112, "insertTime": "2023-05-30 10:50:06", "lastNav": "1.04" }, { "nav": 1.028, "rate": -0.0115, "insertTime": "2023-05-30 10:51:06", "lastNav": "1.04" }, { "nav": 1.0282, "rate": -0.0113, "insertTime": "2023-05-30 10:52:06", "lastNav": "1.04" }, { "nav": 1.028, "rate": -0.0115, "insertTime": "2023-05-30 10:53:06", "lastNav": "1.04" }, { "nav": 1.0292, "rate": -0.0104, "insertTime": "2023-05-30 10:54:06", "lastNav": "1.04" }, { "nav": 1.0281, "rate": -0.0114, "insertTime": "2023-05-30 10:55:06", "lastNav": "1.04" }, { "nav": 1.0285, "rate": -0.0111, "insertTime": "2023-05-30 10:56:06", "lastNav": "1.04" }, { "nav": 1.0284, "rate": -0.0112, "insertTime": "2023-05-30 10:57:06", "lastNav": "1.04" }, { "nav": 1.0285, "rate": -0.0111, "insertTime": "2023-05-30 10:58:06", "lastNav": "1.04" }, { "nav": 1.0269, "rate": -0.0126, "insertTime": "2023-05-30 10:59:06", "lastNav": "1.04" }, { "nav": 1.0262, "rate": -0.0133, "insertTime": "2023-05-30 11:00:06", "lastNav": "1.04" }, { "nav": 1.0256, "rate": -0.0138, "insertTime": "2023-05-30 11:01:06", "lastNav": "1.04" }, { "nav": 1.0263, "rate": -0.0132, "insertTime": "2023-05-30 11:02:06", "lastNav": "1.04" }, { "nav": 1.0271, "rate": -0.0124, "insertTime": "2023-05-30 11:03:06", "lastNav": "1.04" }, { "nav": 1.0268, "rate": -0.0127, "insertTime": "2023-05-30 11:04:06", "lastNav": "1.04" }, { "nav": 1.0271, "rate": -0.0124, "insertTime": "2023-05-30 11:05:06", "lastNav": "1.04" }, { "nav": 1.0272, "rate": -0.0123, "insertTime": "2023-05-30 11:06:06", "lastNav": "1.04" }, { "nav": 1.0272, "rate": -0.0123, "insertTime": "2023-05-30 11:07:06", "lastNav": "1.04" }, { "nav": 1.0272, "rate": -0.0123, "insertTime": "2023-05-30 11:08:06", "lastNav": "1.04" }, { "nav": 1.0265, "rate": -0.013, "insertTime": "2023-05-30 11:09:06", "lastNav": "1.04" }, { "nav": 1.0272, "rate": -0.0123, "insertTime": "2023-05-30 11:10:06", "lastNav": "1.04" }, { "nav": 1.0278, "rate": -0.0117, "insertTime": "2023-05-30 11:11:06", "lastNav": "1.04" }, { "nav": 1.0285, "rate": -0.0111, "insertTime": "2023-05-30 11:12:06", "lastNav": "1.04" }, { "nav": 1.0289, "rate": -0.0107, "insertTime": "2023-05-30 11:13:06", "lastNav": "1.04" }, { "nav": 1.029, "rate": -0.0106, "insertTime": "2023-05-30 11:14:06", "lastNav": "1.04" }, { "nav": 1.0287, "rate": -0.0109, "insertTime": "2023-05-30 11:15:06", "lastNav": "1.04" }, { "nav": 1.0284, "rate": -0.0112, "insertTime": "2023-05-30 11:16:06", "lastNav": "1.04" }, { "nav": 1.0284, "rate": -0.0112, "insertTime": "2023-05-30 11:17:06", "lastNav": "1.04" }, { "nav": 1.0285, "rate": -0.0111, "insertTime": "2023-05-30 11:18:07", "lastNav": "1.04" }, { "nav": 1.0287, "rate": -0.0109, "insertTime": "2023-05-30 11:19:06", "lastNav": "1.04" }, { "nav": 1.0292, "rate": -0.0104, "insertTime": "2023-05-30 11:20:06", "lastNav": "1.04" }, { "nav": 1.0304, "rate": -0.0092, "insertTime": "2023-05-30 11:21:06", "lastNav": "1.04" }, { "nav": 1.0307, "rate": -0.0089, "insertTime": "2023-05-30 11:22:06", "lastNav": "1.04" }, { "nav": 1.0295, "rate": -0.0101, "insertTime": "2023-05-30 11:23:06", "lastNav": "1.04" }, { "nav": 1.0294, "rate": -0.0102, "insertTime": "2023-05-30 11:24:06", "lastNav": "1.04" }, { "nav": 1.0294, "rate": -0.0102, "insertTime": "2023-05-30 11:25:06", "lastNav": "1.04" }, { "nav": 1.029, "rate": -0.0106, "insertTime": "2023-05-30 11:26:06", "lastNav": "1.04" }, { "nav": 1.0293, "rate": -0.0103, "insertTime": "2023-05-30 11:27:06", "lastNav": "1.04" }, { "nav": 1.0284, "rate": -0.0112, "insertTime": "2023-05-30 11:28:06", "lastNav": "1.04" }, { "nav": 1.0283, "rate": -0.0113, "insertTime": "2023-05-30 11:29:11", "lastNav": "1.04" }, { "nav": 1.0259, "rate": -0.0136, "insertTime": "2023-05-30 13:00:07", "lastNav": "1.04" }, { "nav": 1.03, "rate": -0.0096, "insertTime": "2023-05-30 13:01:06", "lastNav": "1.04" }, { "nav": 1.0286, "rate": -0.011, "insertTime": "2023-05-30 13:02:06", "lastNav": "1.04" }, { "nav": 1.0273, "rate": -0.0122, "insertTime": "2023-05-30 13:03:06", "lastNav": "1.04" }, { "nav": 1.0267, "rate": -0.0128, "insertTime": "2023-05-30 13:04:06", "lastNav": "1.04" }, { "nav": 1.0272, "rate": -0.0123, "insertTime": "2023-05-30 13:05:06", "lastNav": "1.04" }, { "nav": 1.0261, "rate": -0.0134, "insertTime": "2023-05-30 13:06:06", "lastNav": "1.04" }, { "nav": 1.0257, "rate": -0.0138, "insertTime": "2023-05-30 13:07:06", "lastNav": "1.04" }, { "nav": 1.0257, "rate": -0.0138, "insertTime": "2023-05-30 13:08:06", "lastNav": "1.04" }] }
        var data = res.body.map(e => e.nav)
        var max = Math.max(...data)
        var min = Math.min(...data)
        var arr = Array(240).fill((max + min) / 2)
        var option = {
            xAxis: {
                type: 'category',
                show: false,
            },
            yAxis: {
                type: 'value',
                show: false,
                min,
                max,
            },
            series: [
                {
                    data: data,
                    type: 'line',
                    smooth: true,
                    symbolSize: 0,
                },
                {
                    data: arr,
                    type: 'line',
                    smooth: true,
                    symbolSize: 0,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 0
                            }
                        }
                    }
                }
            ]
        };
        console.log(option);
        echarts.init(document.getElementById('main')).setOption(option);
    </script>
</body>

</html>